<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <title></title>
    <script type="text/javascript" src="../../js/commonCss.js"></script>
    <link rel="stylesheet" type="text/css" href="../../styles/common.css" />
    <script src="../../js/jquery-3.2.1.min.js"></script>
    <script src="../../js/jquery.formHelp.js"></script>
</head>
<body>
<div class="definewidth m20">
    <form class="form-inline" action="list.html" method="get">
        <div class="form-group">
            <div class="input-group">
                <div class="input-group-addon">角色名称</div>
                <input type="text" class="form-control" id="role">
            </div>
        </div>
        <div class="form-group">
            <button type="button" class="btn btn-primary" id="search">查询</button>

        </div>
    </form>
    <button type="button" class="btn btn-success hideButton" id="addnew">新增</button>
    <button type="button" class="btn btn-danger hideButton" id="delect">删除</button>
    <table class="table table-bordered table-hover m10" id="table">
    </table>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="modalUser">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="form">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">角色管理</h4>
                </div>
                <div class="modal-body">
                    <form class="form">
                        <div class="form-group fix">
                            <div class="input-group w300 mt10">
                                <div class="input-group-addon">上级角色</div>
                                <select class="form-control" id="parentRoleId" name="parentRoleId">
                                </select>
                            </div>
                            <div class="input-group w300 mt10">
                                <div class="input-group-addon">角色名称</div>
                                <input type="text" class="form-control" id="roleName" name="roleName" maxlength="32">
                                <div class="required-icon">*</div>
                            </div>
                            <div class="input-group w200 mt10 hidden">
                                <div class="input-group-addon">createDate</div>
                                <input type="text" class="form-control" id="createDate" name="createDate">
                                <input type="text" class="form-control" id="isValid" name="isValid" value="true">
                            </div>
                            <div class="input-group w300 mt10 hidden">
                                <div class="input-group-addon">角色id</div>
                                <input type="text" class="form-control" id="roleId" name="roleId">
                            </div>
                            <div class="input-group mt10">
                                <div class="input-group-addon">角色描述</div>
                                <textarea class="form-control" rows="3" id="description" name="description" maxlength="128"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="submintBtn">保存</button>
                    <button type="button" class="btn btn-primary" id="submintBtn2">保存</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="modal fade" tabindex="-1" role="dialog" id="modalTwo">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="formTwo">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">权限管理</h4>
                </div>
                <div class="modal-body">
                    <div class="input-group w300 mt10 hidden">
                        <div class="input-group-addon">角色id</div>
                        <input type="text" class="form-control" id="roleId2" name="roleId">
                    </div>
                    <table class="table table-bordered" id="groupAuthor">
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="submintBtn3">保存</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script type="text/javascript" src="../../libs/bootstrap-3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../libs/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="../../libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../libs/bootstrap-table/bootstrap-table.min.css" />
<script type="text/javascript" src="../../js/common.js"></script>
<script type="text/javascript" src="../../js/validateform.js"></script>
<script type="text/javascript" src="list.js?t=20170801"></script>
<script type="text/javascript">
    document.onkeydown=function(event){
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if(e && e.keyCode==13){ // enter 键
            document.getElementById('search').click();
            return false;
        }
    };
    $(function(){
        $.ajax({
            type: "POST",
            url: ctx + "/role/query",
            data:{
                pageSize: '0'
            },
            success: function(data){
                if(data.code == 200){
                    var param = data.data.rows;
                    var html = '';
                    html +='<option value="">请选择</option>';
                    for (var i =0;i<param.length;i++){
                        html +='<option value="'+ param[i].roleId +'">'+ param[i].roleName +'</option>';
                    }
                    $('#parentRoleId').append(html);
                }
            }
        });

        $.ajax({
            type: "POST",
            url: ctx + "/function/queryAsGroup",
            success: function(data){
                if(data.code == 200){
                    setCheckbox('#groupAuthor', data.data, 'functionIds')
                }
            }
        });
        var formdata = '';
        var checkIds = '';
        $('#addnew').click(function () {
            $('#parentRoleId option:hidden').show();
            $("#roleName").val('');
            $("#roleId").val('');
            $("#description").val('');
            $("#createDate").val('');
            $('#modalUser').modal({backdrop: 'static', keyboard: false});
            $("#submintBtn2").hide();
            $("#submintBtn").show();
            $("#roleName").removeAttr('disabled');
            $("#roleId").removeAttr('disabled');
            $("#description").removeAttr('disabled');
            $("#createDate").removeAttr('disabled');
            $("#modalUser").removeAttr('disabled');
        })
        $("#submintBtn").click(function () {
            if($("#form").valid()){
                formdata = $("#form").serializeJson()
                $.ajax({
                    type: 'POST',
                    url: ctx + "/role/add",
                    contentType: "application/json",
                    dataType: 'json',
                    data: JSON.stringify(formdata),
                    success: function(data){
                        if(data.code==200){
                            location.reload();
                        }else{
                            alert(data.msg);
                        }
                    }
                })
            }
        });
        $("#submintBtn2").click(function () {
            if($("#form").valid()){
                formdata = $("#form").serializeJson()
                $.ajax({
                    type: 'POST',
                    url: ctx + "/role/update",
                    contentType: "application/json",
                    dataType: 'json',
                    data: JSON.stringify(formdata),
                    success: function(data){
                        if(data.code==200){
                            location.reload();
                        }else{
                            alert(data.msg);
                        }
                    }
                })
            }
        });
        $("#submintBtn3").click(function () {
            checkIds = $("#formTwo").serializeJson();
            $.ajax({
                type: 'POST',
                url: ctx + "/role/insertRoleFunction",
                contentType: "application/json",
                dataType: 'json',
                data: JSON.stringify(checkIds),
                success: function(data){
                    if(data.code == 200){
                        $('#modalTwo').modal('hide');
                        $('#table').bootstrapTable('refresh', {url: ctx + '/role/query'});
                    }else{
                        alert(data.msg);
                    }

                }
            })
        })
    });

    function setCheckbox(id, param, name){
        var html = '';
        html += '<thead><tr><th>分组名称</th><th>权限列表</th></thead>';
        for (var i =0;i<param.length;i++){
            html +='<tbody><tr><td>'+param[i].groupName+'<td><div class=checkboxli>';
            for (var j =0;j<param[i].pemissionList.length;j++){
                html +='<label class=checkbox-inline><input type=checkbox name="'+name+'" value='+param[i].pemissionList[j].functionId+'>'+param[i].pemissionList[j].functionName+'</label>';
            }
            html +='</div></tr></tbody>'
        }
        $(id).append(html);
    }
</script>
</body>
</html>